<template>
  <div class="graphics-page">
    <el-scrollbar ref="graphicsScroll">
        <div v-for="(item,index) in graphicGroups" class="graphice-item" :key="index">
            <div class="graphics-title" @click="openCurrentItem(item)">
                <svg class="arrow-icon">
                    <use v-bind:xlink:href="`#${!item.show?'keowledge-xiala-shouqi':'keowledge-xiala-zhankai'}`"></use>
                </svg>
                <span class="name">{{$t(item.name)}}</span>
            </div>
            <div class="graphics-body" :class="[item.show?'graphics-item-open':'']">
                <div class="graphics-items">
                    <div class="items-box">
                        <div class="graphics-list-item" v-for="(cItem,cIndex) in item.list" :key="cIndex"
                        :draggable="true"
                        @dragstart="dragStart($event, cItem)"
                        @click.prevent="dragStart($event, cItem)">
                            <el-tooltip :content="$t(cItem.name)" effect="light">
                                <svg class="item-icon">
                                    <use v-bind:xlink:href="`#${cItem.icon}`"></use>
                                </svg>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {
  ref
} from 'vue' 

import { useHookI18n } from '@/hooks/i18n'
const { $t } = useHookI18n()

const graphicsScroll = ref()
const emit = defineEmits([""])

const graphicGroups = ref([
  {
    name: 'message.text.basicShape',
    show: true,
    list: [
      {
        name: 'message.text.square',
        icon: 'keowledge-zhengfangxing',
        id: 1,
        data: {
          width: 100,
          height: 100,
          name: 'square',
        },
      },
      {
        name: 'message.text.rectangle',
        icon: 'keowledge-juxing',
        id: 2,
        data: {
          width: 200,
          height: 50,
          borderRadius: 0.1,
          name: 'rectangle',
        },
      },
      {
        name: 'message.text.rectangle',
        icon: 'keowledge-a-zu7173',
        id: 3,
        data: {
          width: 100,
          height: 100,
          name: 'circle',
        },
      },
      {
        name: 'message.text.triangle',
        icon: 'keowledge-sanjiaoxing',
        id: 4,
        data: {
          width: 100,
          height: 100,
          name: 'triangle',
        },
      },
      {
        name: 'message.text.diamond',
        icon: 'keowledge-a-zu77281',
        id: 5,
        data: {
          width: 100,
          height: 100,
          name: 'diamond',
        },
      },
      {
        name: 'message.text.pentagon',
        icon: 'keowledge-wubianxing',
        id: 6,
        data: {
          width: 100,
          height: 100,
          name: 'pentagon',
        },
      },
      {
        name: 'message.text.hexagon',
        icon: 'keowledge-liubianxing',
        id: 7,
        data: {
          width: 100,
          height: 100,
          name: 'hexagon',
        },
      },
      {
        name: 'message.text.hexagon',
        icon: 'keowledge-a-zu7692',
        id: 8,
        data: {
          width: 100,
          height: 100,
          name: 'pentagram',
        },
      },
      {
        name: 'message.text.leftArrow',
        icon: 'keowledge-zuojiantou',
        id: 9,
        data: {
          width: 120,
          height: 60,
          name: 'leftArrow',
        },
      },
      {
        name: 'message.text.rightArrow',
        icon: 'keowledge-youjiantou',
        id: 10,
        data: {
          width: 120,
          height: 60,
          name: 'rightArrow',
        },
      },
      {
        name: 'message.text.doubleDirArrow',
        icon: 'keowledge-shuangxiangjiantou',
        id: 11,
        data: {
          width: 150,
          height: 60,
          name: 'twowayArrow',
        },
      },
      {
        name: 'message.text.cloud',
        icon: 'keowledge-yun',
        id: 13,
        data: {
          width: 100,
          height: 100,
          name: 'cloud',
        },
      },
      {
        name: 'message.text.messageBox',
        icon: 'keowledge-a-zu7699',
        id: 14,
        data: {
          textTop: -0.1,
          width: 100,
          height: 100,
          name: 'message',
        },
      },
      {
        name: 'message.text.file',
        icon: 'keowledge-a-zu7700',
        id: 15,
        data: {
          width: 80,
          height: 100,
          name: 'file',
        },
      },
      {
        name: 'message.text.text',
        icon: 'keowledge-wenzi',
        data: {
          text: 'message.text.textDocument',
          width: 100,
          height: 20,
          name: 'text'
        }
      },
      {
        name: 'message.text.cube',
        icon: 'keowledge-a-zu7702',
        id: 18,
        data: {
          width: 60,
          height: 100,
          name: 'cube',
          z: 0.25,
          props: {
            custom: [
              {
                key: 'z',
                label: 'Z',
                type: 'number',
                min: 0,
                placeholder: 'message.text.cubePlaceholder',
              },
              {
                key: 'backgroundFront',
                label: 'message.text.frontBackgroundColor',
                type: 'color',
              },
              {
                key: 'backgroundUp',
                label: 'message.text.topBackgroundColor',
                type: 'color',
              },
              {
                key: 'backgroundRight',
                label: 'message.text.rightBackgroundColor',
                type: 'color',
              },
            ],
          },
        },
      },
      {
        name: 'message.text.persion',
        icon: 'keowledge-a-zu7703',
        id: 19,
        data: {
          width: 70,
          height: 100,
          name: 'people',
        },
      },
    ],
  },
  {
    name: 'message.typeMenu.process',
    show: true,
    list: [
      {
        name:'message.text.startOrEnd',
        icon: 'keowledge-a-zu7712',
        id: 21,
        data: {
          text: 'message.text.startOrEnd',
          width: 120,
          height: 40,
          borderRadius: 0.5,
          name: 'rectangle',
        },
      },
      {
        name: 'message.text.flowPath',
        icon: 'keowledge-a-zu7713',
        id: 22,
        data: {
          text: 'message.text.flowPath',
          width: 120,
          height: 40,
          name: 'rectangle',
        },
      },
      {
        name: 'message.text.determine',
        icon: 'keowledge-a-zu7714',
        id: 23,
        data: {
          text: 'message.text.determine',
          width: 120,
          height: 60,
          name: 'diamond',
        },
      },
      {
        name: 'message.text.dataGraphices',
        icon: 'keowledge-a-zu7689',
        id: 24,
        data: {
          text: 'message.text.dataGraphices',
          width: 120,
          height: 50,
          name: 'flowData',
          offsetX: 0.14,
        },
      },
      {
        name: 'message.text.preparation',
        icon: 'keowledge-zhunbei',
        id: 25,
        data: {
          text: 'message.text.preparation',
          width: 120,
          height: 50,
          name: 'hexagon',
        },
      },
      {
        name: 'message.text.subProcess',
        icon: 'keowledge-ziliucheng',
        id: 26,
        data: {
          text: 'message.text.subProcess',
          width: 120,
          height: 50,
          name: 'flowSubprocess',
        },
      },
      {
        name: 'message.text.database',
        icon: 'keowledge-shujuku',
        id: 27,
        data: {
          text: 'message.text.database',
          width: 80,
          height: 120,
          name: 'flowDb',
        },
      },
      {
        name: 'message.text.document',
        icon: 'keowledge-wendang',
        id: 28,
        data: {
          text: 'message.text.document',
          width: 120,
          height: 100,
          name: 'flowDocument',
        },
      },
      {
        name: 'message.text.internalStorage',
        icon: 'keowledge-neibucunchu',
        id: 29,
        data: {
          text: 'message.text.internalStorage',
          width: 120,
          height: 80,
          name: 'flowInternalStorage',
        },
      },
      {
        name: 'message.text.externalStorage',
        icon: 'keowledge-waibucunchu',
        id: 30,
        data: {
          text: 'message.text.externalStorage',
          width: 120,
          height: 80,
          name: 'flowExternStorage',
        },
      },
      {
        name: 'message.text.queue',
        icon: 'keowledge-a-zu7724',
        id: 31,
        data: {
          text: 'message.text.queue',
          width: 100,
          height: 100,
          name: 'flowQueue',
        },
      },
      {
        name: 'message.text.manualInput',
        icon: 'keowledge-a-zu7718',
        id: 32,
        data: {
          text: 'message.text.manualInput',
          width: 120,
          height: 80,
          name: 'flowManually',
        },
      },
      {
        name: 'message.text.show',
        icon: 'keowledge-zhanshi',
        id: 33,
        data: {
          text: 'message.text.show',
          width: 120,
          height: 80,
          name: 'flowDisplay',
        },
      },
      {
        name: 'message.text.parallelMode',
        icon: 'keowledge-a-zu7721',
        id: 34,
        data: {
          text: 'message.text.parallelMode',
          width: 120,
          height: 50,
          name: 'flowParallel',
        },
      },
      {
        name: 'message.text.explanatoryNote',
        icon: 'keowledge-a-zu7725',
        id: 35,
        data: {
          text: 'message.text.explanatoryNote',
          width: 100,
          height: 100,
          name: 'flowComment',
        },
      },
    ],
  },
  {
    name:  'message.text.activityDiagram',
    show: true,
    list: [
      {
        name: 'message.text.start',
        icon: 'keowledge-a-zu7729',
        id: 36,
        data: {
          text: '',
          width: 30,
          height: 30,
          name: 'circle',
          background: '#555',
          lineWidth: 0,
        },
      },
      {
        name: 'message.text.end',
        icon: 'keowledge-a-zu77301',
        id: 37,
        data: {
          width: 30,
          height: 30,
          name: 'activityFinal',
        },
      },
      {
        name: 'message.text.activity',
        icon: 'keowledge-a-zu7690',
        id: 38,
        data: {
          text: 'message.text.activity',
          width: 120,
          height: 50,
          borderRadius: 0.25,
          name: 'rectangle',
        },
      },
      {
        name: 'message.text.decisionMerger',
        icon: 'keowledge-a-zu77281',
        id: 39,
        data: {
          text: 'message.text.decisionMerger',
          width: 120,
          height: 50,
          name: 'diamond',
        },
      },
      {
        name: 'message.text.verticalSwimming',
        icon: 'keowledge-chuizhiyongdao',
        id: 40,
        data: {
          text: 'message.text.verticalSwimming',
          width: 200,
          height: 500,
          name: 'swimlaneV',
          textBaseline: 'top',
          textTop: 20,
          // textHeight: ,
          lineTop: 0.08,
        },
      },
      {
        name: 'message.text.horizontalSwimming',
        icon: 'keowledge-shuipingyongdao',
        id: 41,
        data: {
          text: 'message.text.horizontalSwimming',
          width: 500,
          height: 200,
          name: 'swimlaneH',
          textWidth: 0.01,
          textLeft: 0.04,
          textAlign: 'left',
          lineLeft: 0.08,
        },
      },
      {
        name: 'message.text.verticalConver',
        icon: 'keowledge-a-zu7734',
        id: 42,
        data: {
          text: 'message.text.verticalConver',
          width: 10,
          height: 150,
          name: 'forkV',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
      {
        name: 'message.text.horizontalConver',
        icon: 'keowledge-a-zu7733',
        id: 43,
        data: {
          text: 'message.text.horizontalConver',
          width: 150,
          height: 10,
          name: 'forkH',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
    ],
  },
  {
    name: 'message.text.sequenceAndClass',
    show: true,
    list: [
      {
        name: 'message.text.lifeline',
        icon: 'keowledge-shengmingxian',
        id: 44,
        data: {
          text: 'message.text.lifeline',
          width: 150,
          height: 400,
          textHeight: 50,
          name: 'lifeline',
        },
      },
      {
        name: 'message.text.activation',
        icon: 'keowledge-jihuo',
        id: 45,
        data: {
          text: 'message.text.activation',
          width: 12,
          height: 200,
          name: 'sequenceFocus',
        },
      },
      {
        name: 'message.text.simpleClass',
        icon: 'keowledge-jiandanlei',
        id: 46,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'simpleClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string\n+ setName(name: string): void',
            },
          ],
        },
      },
      {
        name: 'message.text.class',
        icon: 'keowledge-lei',
        id: 47,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'interfaceClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string',
            },
            {
              text: '+ setName(name: string): void',
            },
          ],
        },
      },
    ],
  },
  {
    name: 'message.text.faultTree',
    show: true,
    list: [
      {
        name: 'message.text.andGate',
        icon: 'keowledge-yumen',
        data: {
          name: 'andGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.basicEvent',
        icon: 'keowledge-a-zu7760',
        data: {
          name: 'basicEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.unExpandedEvents',
        icon: 'keowledge-a-zu77611',
        data: {
          name: 'unexpandedEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.priorityAndGate',
        icon: 'keowledge-youxianAN',
        data: {
          name: 'priorityAndGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.prohibitedDoor',
        icon: 'keowledge-a-huaban1',
        data: {
          name: 'forbiddenGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.event',
        icon: 'keowledge-shijian1',
        data: {
          name: 'event',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.switchingEvent',
        icon: 'keowledge-a-zu7755',
        data: {
          name: 'switchEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.conditionalEvent',
        icon: 'keowledge-a-zu7756',
        data: {
          name: 'conditionalEvent',
          width: 150,
          height: 100,
        },
      },
      {
        name: 'message.text.transferSymbol',
        icon: 'keowledge-a-huaban11',
        data: {
          name: 'transferSymbol',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.orGate',
        icon: 'keowledge-a-zu7751',
        data: {
          name: 'orGate',
          width: 100,
          height: 150,
        },
      },
      {
        name:  'message.text.exclusiveOrGate',
        icon: 'keowledge-yiyumen',
        data: {
          name: 'xorGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: 'message.text.votingGate',
        icon: 'keowledge-a-zu7753',
        data: {
          name: 'votingGate',
          width: 100,
          height: 150,
        },
      },
    ],
  },
  {
    name:'message.text.brainMap',
    show: true,
    list: [
      {
        name: 'message.text.theme',
        icon: 'keowledge-zhuti',
        data: {
          text: 'message.text.theme',
          width: 200,
          height: 50,
          name: 'mindNode',
          borderRadius: 0.5,
        },
      },
      {
        name: 'message.text.subThemes',
        icon: 'keowledge-a-zu7768',
        data: {
          text: 'message.text.subThemes',
          width: 160,
          height: 40,
          name: 'mindLine',
        },
      },
    ],
  },
])

const dragStart = (e: any, elem: any) => {
  if (!elem) {
    return;
  }
  e.stopPropagation();
  // 执行国际化
  if(elem.data.text){
    elem.data.text = $t(elem.data.text)
  }
  let newData = {
      ...elem.data,
      id:URL.createObjectURL(new Blob()).substr(-36),
    }
  // 拖拽事件
  if (e instanceof DragEvent) {
    // 设置拖拽数据
    e.dataTransfer?.setData('Meta2d', JSON.stringify(newData));
  } else {
    // 支持单击添加图元。平板模式
    // meta2d.canvas.addCaches = [elem.data];
    meta2d.canvas.addCaches = [newData];
  }
};

function openCurrentItem(item: any){
    item.show = !item.show
    graphicsScroll.value.update()
}
</script>
<style lang="scss" scoped>
.graphics-page{
    width: 240px;
    height: calc(100vh - 90px);
    background-color: #fff;
    border-right: 1px solid #eeeff0;
    .graphice-item{
        padding: 0px 12px 0px;
        &:nth-child(1){
            padding-top: 8px;
        }
        .graphics-title{
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            &:hover{
                background: #F5F6F7;
            }
            .arrow-icon{
                width: 14px;
                height: 14px;
                cursor: pointer;
                margin-right: 4px;
            }
            .name{
                color: #363b4c;
                font-size: 14px;
            }
        }
        .graphics-body{
            margin-left: 8px;
            margin-right: 4px;
            display: grid;
            flex-direction: column;
            grid-template-rows: 0fr;
            overflow: hidden;
            transition: all 0.4s;
            .graphics-items{
                overflow: hidden;
                .items-box{
                    display: grid;
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                    grid-column-gap: 10px;
                    grid-row-gap: 10px;
                    .graphics-list-item{
                        width: 32px;
                        height: 32px;
                        border-radius: 4px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        ::v-deep(span){
                            height: 24px !important;
                        }
                        &:hover{
                            background: #F5F6F7;
                        }
                        .item-icon{ 
                            width: 24px;
                            height: 24px;
                        }
                    }
                }
            }
        }
        .graphics-item-open{
            grid-template-rows: 1fr; 
        }
    }
}
</style>